<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<body>
    姓名：
    <input type="text" v-model="data.name" placeholder="姓名"/>   <br><br><br>
    性别： <br>
    <label for="man">
        <input type="radio" id="man" value="One" v-model="data.sex"/> 男
    </label>
    <label for="male">
        <input type="radio" id="male" value="Two" v-model="data.sex"/> 女
    </label>    <br><br><br>
    爱好:  <br>
    <label for="jack">
        <input type="checkbox" id="jack" value="book" v-model="data.interest"/> 阅读
    </label>
    <label for="john">
        <input type="checkbox" id="john" value="swim" v-model="data.interest"/> 游泳
    </label>
    <label for="move">
        <input type="checkbox" id="move" value="game" v-model="data.interest"/> 游戏
    </label>
    <label for="mike">
        <input type="checkbox" id="mike" value="song" v-model="data.interest"/> 唱歌
    </label>    <br><br><br>
    身份：  <br>
    <select v-model="data.identity">
        <option value="teacher" selected>教师</option>
        <option value="doctor">医生</option>
        <option value="lawyer">律师</option>
    </select>   <br><br><br>
    <button  @click="show(data)">获取值</button>
</body>
<script>
    new Vue({
        el:'body',
        data:{
            data:{
                name:'',
                sex:'',
                interest:[],
                identity:''
            }
        },
        methods:{
            show: function(ev){
                alert(JSON.stringify(ev));
            }
        }
    });
</script>
</html>



















